import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Image,
  ImageBackground, 
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {Form, Input} from '@ant-design/react-native';
import {goBack, replace} from '@/utils/navigation';
import { Button } from '@ant-design/react-native';
import { navigate } from '@/utils/navigation';

export default function Login() {
  return (
    <SafeAreaView>
      <ScrollView className='bg-[#F4F4F5]'>
        <ImageBackground source={require('@/assets/images/auth/bg.png')}>
          <View className="pt-[202px] px-[24px] relative flex-1 ">
            <Image
              source={require('@/assets/images/auth/logo.png')}
              className="w-[160px] h-[36px] mb-[10px]"
            />
            <Text className='text-[32px] text-[#FBAA19] font-bold'>สินเชื่อพร้อมใช้</Text>
            <Text className='text-[32px] text-[#626366] font-bold'>คู่ใจใกล้คุณ</Text>
            <View className='mt-2'>
              <Text>สินเชื่อออนไลน์รวดเร็ว เชื่อถือได้</Text>
              <Text>มอบความช่วยเหลือทางการเงิน</Text>
              <Text>สำหรับทุกคนในเมืองไทย</Text>
            </View>
            <View className="mt-2 text-[16px] text-[#626366] flex flex-row items-center jus gap-1">
              <Text className="w-[4px] h-[18px] rounded-t-[2px] rounded-br-[10px] bg-[#FBAA19] inline-block"></Text>
              <Text>เบอร์โทรศัพท์</Text>
            </View>
            <Form>
              <Form.Item 
                name="phoneNumber"
                rules={[
                  {
                    required: true, 
                    message: 'โปรดกรอกเบอร์โทรศัพท์ของท่าน',
                    pattern: /^0[0-9]{9}$/
                  },
                ]}
              >
                <Input allowClear placeholder="0xx-xxx-xxxx" />
              </Form.Item>
            </Form>
            <View className='mt-4'>
              <Button type="primary" onPress={()=> {
                navigate('/home')
              }}>去登陆</Button>
            </View>
          </View>
        </ImageBackground>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F4F4F5',
  },
});
